<template>
	<view class="privacy_box">
		<view class="privacy_list_box w100">
			<view class="list_box flex flexjus" style="height: 148upx;" @click="edit">
				<view class="flex">
					<view class="edit_txt s28 f500 family">
						头像
					</view>
					<view class="toux_img">
						<image class="image w100 h100" :src="user.avatar" mode=""></image>
					</view>
				</view>
				<view class="edit_icon">
					<image class="w100 h100" src="../static/right_hui_jian.png" mode=""></image>
				</view>
			</view>
			<view class="list_box h100 flex flexjus" style="border-bottom: 2upx solid #F1F1F1;">
				<view class="flex">
					<view class="edit_txt s28 f500 family">
						昵称
					</view>
					<view class="edit_txt s26 f500 family"
						style="width: 230upx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 362upx;" v-if="toShow" @click="xianShi">
						{{user.nickname}}
					</view>
					<input v-if="show" class="uni-input s26 family f500" v-model="user.nickname" @blur="onBlur" placeholder="请输入新昵称" />
				</view>
				<view class="edit_icon">
					<image class="w100 h100" src="../static/right_hui_jian.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				toShow: true,
				user: {}
			}
		},
		onLoad() {
			this.user = uni.getStorageSync("userInfo")
		},
		methods: {
			xianShi() {
				this.show = !this.show
				this.toShow = !this.toShow
			},
			onBlur() {
				this.show = !this.show 
				this.toShow = !this.toShow
				this.$store.commit("setNickname", this.user.nickname);
				this.$store.commit("setIsLogin", true);
				
			},
			edit() {
				this.$upLoadImage().then(res => {
					this.$store.commit("setAvatar", res.fullurl);
					this.$store.commit("setIsLogin", true);
				}).catch(error => {
					return false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.privacy_box {
		overflow: hidden;

		.privacy_list_box {
			.list_box {
				width: 686upx;
				height: 108upx;
				padding-left: 32upx;
				padding-right: 32upx;

				.edit_txt {
					color: #000000;
					line-height: 148upx;
				}

				.uni-input {
					width: 220upx;
					height: 60upx;
					background-color: #F4F5F9;
					margin-top: 42upx;
					margin-left: 362upx;
					border: 16upx 16upx 16upx 16upx;
					padding-left: 20upx;
				}

				.toux_img {
					width: 96upx;
					height: 96upx;
					margin-left: 496upx;
					border-radius: 50%;
					margin-top: 20upx;

					.image {
						border-radius: 50%;
					}
				}

				.switch {
					margin-top: 20upx;
				}

				.edit_icon {
					width: 9upx;
					height: 18upx;
					margin-top: 46upx;
				}
			}

			.shiyong_box {
				height: 94upx;
				background: #F4F5F9;

				.shuxian {
					width: 8upx;
					height: 28upx;
					background-color: #EBBE87;
					margin-top: 34upx;
					margin-left: 32upx;
				}

				.shiyong_txt {
					color: #EBBE87;
					line-height: 94upx;
					margin-left: 6upx;
				}
			}
		}
	}
</style>
